﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Camping_test.aspx.cs" Inherits="HotellApplikationASP.Camping_test" MasterPageFile="~/Site.Master" %>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <div style="margin-top: 50px;"> </div>
    <div class="row">
        <div id="mapArea" class="col-md-8">
            <asp:literal runat="server" ID="svgArea"></asp:literal>
        </div>
        <div id="recieptArea" class="col-md-4">
            <h2>Your reservations</h2>
            <ul id="reservationList">
                
            </ul>
        </div>
    </div
    <!-- Button trigger modal -->
<button style="display: none;" id="modal-button" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Open booking details
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="modalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <p id="errorMessage" style="color: red;"></p>
        <p>From date:</p>
        <input type="text" id="datepickerFrom" />
        <p>To date:</p>
        <input type="text" id="datepickerTo" />

        <asp:Literal runat="server" ID="disableDatesArray"></asp:Literal>
        <script>
            if (disableDates === undefined) {
                var disableDates = new Array();
            }

            $(function () {
                $("#datepickerFrom").datepicker({
                    onClose: function (selectedDate) {
                        $("#datepickerTo").datepicker("option", "minDate", selectedDate);
                    },
                    beforeShowDay: function(date){
                        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                        return [ disableDates.indexOf(string) == -1 ]
                    }
                });
                $("#datepickerTo").datepicker({
                    onClose: function (selectedDate) {
                        $("#datepickerFrom").datepicker("option", "maxDate", selectedDate);
                    }
                });
            });
        </script>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="reserveButton" data-dismiss="modal">Reserve house</button>
      </div>
    </div>
  </div>
</div>



<script>



    var currentHouse = "";
    var bookingDetails = new Array();
    $('.houses, #BeachBall').click(function (e) {
        console.log(e.currentTarget.id + ' was clicked.');

        if (e.currentTarget.id == 'BeachBall') {
            $('#shark').show();
        } else {
            currentHouse = e.currentTarget.id;
            editModal();
            openModal();
        }
    });

    $('#reserveButton').click(function (e) {
        var sDate = $("#datepickerFrom").val();
        var eDate = $("#datepickerTo").val();

        if (sDate == "" || eDate == "") {
            $("#errorMessage").text("No dates picked");
            return false;
        }

        bookingDetails.push({ houseId: currentHouse, startDate: sDate, endDate: eDate });
        updateReservationList();
    });

    function editModal() {
        $("#errorMessage").text('');
        $("#modalLabel").text(currentHouse);
    }

    function openModal() {
        $('#modal-button').click();
    }

    function updateReservationList() {
        $list = $('#reservationList');
        $list.empty();
        $(bookingDetails).each(function(index, element) {
            $list.append('<li>' + element.houseId + ' from: ' + element.startDate + ', to: ' + element.endDate + '.');
        });
        
    }
</script>
</asp:Content>


